<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            background-color: #333;
        }

        div{
            position: relative;
            height: 500px;
            width: 500px;
            /* background-color: aliceblue; */
            /* box-shadow: 0 0 20PX #fff; */
            margin: auto;
        }

        span{
            /* display: block; */
            position: absolute;
            float: left;
            height: 40px;
            width: 40px;
            border-radius: 20px;
            transition: all .5s ease-out;
        }

        div span:nth-child(7){
            background-color: red;
            top: calc(50% - 30px);
            left: calc(50% - 20px);
        }
        div:hover span:nth-child(7){
            transform: translateY(0px);
            height: 300px;
        }

        div span:nth-child(6){
            background-color: yellow;
            top: calc(50% - 30px);
            left: calc(50% - 60px);
        }
        div:hover span:nth-child(6){
            transform: translateY(-30px);
            height: 290px;
        }

        div span:nth-child(8){
            background-color: yellow;
            top: calc(50% - 30px);
            left: calc(50% + 20px);
        }
        div:hover span:nth-child(8){
            transform: translateY(-30px);
            height: 290px;
        }

        div span:nth-child(5){
            background-color: orange;
            top: calc(50% - 30px);
            left: calc(50% - 100px);
        }
        div:hover span:nth-child(5){
            transform: translateY(-60px);
            height: 290px;
        }

        div span:nth-child(9){
            background-color: orangered;
            top: calc(50% - 30px);
            left: calc(50% + 60px);
        }
        div:hover span:nth-child(9){
            transform: translateY(-60px);
            height: 290px;
        }

        div span:nth-child(4){
            background-color: rgb(44, 224, 35);
            top: calc(50% - 30px);
            left: calc(50% - 140px);
        }
        div:hover span:nth-child(4){
            transform: translateY(-60px);
            height: 260px;
        }

        div span:nth-child(10){
            background-color: rgb(44, 224, 35);
            top: calc(50% - 30px);
            left: calc(50% + 100px);
        }
        div:hover span:nth-child(10){
            transform: translateY(-60px);
            height: 260px;
        }

        div span:nth-child(3){
            background-color: rgb(200, 8, 253);
            top: calc(50% - 30px);
            left: calc(50% - 180px);
        }
        div:hover span:nth-child(3){
            transform: translateY(-30px);
            height: 200px;
        }

        div span:nth-child(11){
            background-color: rgb(200, 8, 253);
            top: calc(50% - 30px);
            left: calc(50% + 140px);
        }
        div:hover span:nth-child(11){
            transform: translateY(-30px);
            height: 200px;
        }

        div span:nth-child(2){
            background-color: rgb(247, 56, 136);
            top: calc(50% - 30px);
            left: calc(50% - 220px);
        }
        div:hover span:nth-child(2){
            /* transform: translateY(-30px); */
            height: 130px;
        }

        div span:nth-child(12){
            background-color: rgb(247, 56, 136);
            top: calc(50% - 30px);
            left: calc(50% + 180px);
        }
        div:hover span:nth-child(12){
            /* transform: translateY(-30px); */
            height: 130px;
        }

        div span:nth-child(1){
            background-color: rgb(200, 8, 253,0);
            top: calc(50% - 30px);
            left: calc(50% - 260px);
        }
        div:hover span:nth-child(1){
            transform: translateY(30px);
            height: 80px;
        }

        div span:nth-child(13){
            background-color: rgb(200, 8, 253,0);
            top: calc(50% - 30px);
            left: calc(50% + 220px);
        }
        div:hover span:nth-child(13){
            transform: translateY(30px);
            height: 80px;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>